<template>
  <div class="user">
    <div class="header">
      <el-row>
        <el-col :span="4"
          ><div class="grid-content bg-purple">
            <img
              class="user-img"
              src="https://s1.ax1x.com/2022/10/18/xrc1ts.png"
              alt=""
            />
            <span class="user-span">用户管理</span>
          </div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-light"></div
        ></el-col>
        <!-- 添加--批量添加 -->
        <el-col :span="2">
          <div class="grid-content bg-purple">
            <el-select v-model="value" clearable placeholder="添加">
              <el-option value="添加"
                ><el-button type="text" @click="dialogVisible = true"
                  >添加</el-button
                ></el-option
              >
              <el-option value="批量添加">批量添加</el-option>
            </el-select>
          </div>
          <!-- 添加用户 -->
          <el-dialog
            title="添加"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose"
          >
            <el-form label-width="80px">
              <el-form-item label="姓名">
                <el-input v-model="DataList.doctor_name"></el-input>
              </el-form-item>
              <el-form-item label="手机">
                <el-input v-model="DataList.doctor_phone"></el-input>
              </el-form-item>
              <el-form-item label="医院">
                <el-input v-model="DataList.hospital_name"></el-input>
              </el-form-item>
              <el-form-item label="科室">
                <el-input v-model="DataList.departments_name"></el-input>
              </el-form-item>
              <el-form-item label="职称">
                <el-select v-model="DataList.position_name">
                  <el-option value="主任医生">主任医生</el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="身份">
                <el-select v-model="DataList.sys_username">
                  <el-option value="医生">医生</el-option>
                  <el-option value="管理员">管理员</el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="addList">确 定</el-button>
            </span>
          </el-dialog>
          <!-- 批量添加用户 -->
          <div class="batchuser" v-show="batchadd">
            <div class="header-head">
              <span>批量导入</span>
              <img
                src="https://s1.ax1x.com/2022/10/27/xfgm7R.png"
                alt=""
                @click="batchadd = false"
              />
            </div>
            <div class="nav">
              <span>1、请<a>下载</a>批量导入模板</span>
              <br />
              <span>2、按照模板要求填写表格后，<a>上传</a>表格</span>
            </div>
            <div class="floot">
              <button @click="batchadd = false">取消</button>
              <button>导入</button>
            </div>
          </div>
        </el-col>
        <!-- 医院 -->
        <el-col :span="2">
          <div class="grid-content bg-purple-light">
            <el-select v-model="value2" placeholder="医院">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </el-col>
        <!-- 科室 -->
        <el-col :span="2">
          <!-- 科室 -->
          <div class="grid-content bg-purple">
            <el-select v-model="value3" placeholder="科室">
              <el-option
                v-for="item in options3"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select></div
        ></el-col>
        <el-col :span="5"
          ><div class="grid-content bg-purple">
            <input type="text" class="user-input" /></div
        ></el-col>
      </el-row>
    </div>
    <!-- 列表信息 -->
    <div class="user-list">
      <el-table :data="tableData" style="width: 1310px">
        <el-table-column width="180">
          <template slot-scope="scope">
            <el-popover placement="top">
              <div slot="reference" class="name-wrapper">
                <!-- 姓名 -->
                <el-tag size="medium">{{ scope.row.doctorName }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column width="180">
          <template slot-scope="scope">
            <el-popover placement="top">
              <div slot="reference" class="name-wrapper">
                <!-- 手机 -->
                <el-tag size="medium">{{ scope.row.doctorPhone }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column width="180">
          <template slot-scope="scope">
            <el-popover placement="top">
              <div slot="reference" class="name-wrapper">
                <!-- 医院 -->
                <el-tag size="medium">{{ scope.row.hospitalName }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column width="180">
          <template slot-scope="scope">
            <el-popover placement="top">
              <div slot="reference" class="name-wrapper">
                <!-- 科室 -->
                <el-tag size="medium">{{ scope.row.departmentsName }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column width="180">
          <template slot-scope="scope">
            <el-popover placement="top">
              <div slot="reference" class="name-wrapper">
                <!-- 医生 -->
                <el-tag size="medium">{{ scope.row.positionName }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column width="180">
          <template slot-scope="scope">
            <el-popover placement="top">
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.positionName }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column>
          <template>
            <el-button size="mini" @click="theEditor = true">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 编辑列表数据 -->
      <el-dialog
        title="编辑"
        :visible.sync="theEditor"
        width="30%"
        :before-close="handleClose"
        :data="tableData"
        
        >
        <el-form label-width="80px">
          <el-form-item label="姓名">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="手机">
            <el-input v-model="tableData.doctorName"></el-input>
          </el-form-item>
          <el-form-item label="医院">
            <el-input v-model="DataList.theHospital"></el-input>
          </el-form-item>
          <el-form-item label="科室">
            <el-input v-model="DataList.department"></el-input>
          </el-form-item>
          <el-form-item label="职称">
            <el-select v-model="DataList.position_name">
              <el-option value="主任医生">主任医生</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="身份">
            <el-select v-model="DataList.sys_username">
              <el-option value="医生">医生</el-option>
              <el-option value="管理员">管理员</el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="theEditor = false">取 消</el-button>
          <el-button type="primary" @click="deterEditor">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "user",
  data() {
    return {
      // 添加
      options: [
        {
          value: "1",
          label: "添加",
        },
        {
          value: "2",
          label: "批量添加",
        },
      ],
      value: "",
      // 医院
      options2: [
        {
          value: "1",
          label: "主任医生",
        },
      ],
      value2: "",
      // 科室
      options3: [
        {
          value: "1",
          label: "儿科",
        },
      ],
      value3: "",
      // 批量添加
      batchadd: false,
      // 添加
      dialogVisible: false,
      // 编辑
      theEditor: false,
      // 列表数据
      tableData: [{}],
      // 添加列表数据
      DataList: {
        // 姓名
        doctor_name: "",
        // 手机
        doctor_phone: "",
        // 医院
        hospital_name: "",
        // 科室
        departments_name: "",
        // 职称
        position_name: "",
        // 身份
        sys_username: "",
      },
    };
  },
  // 钩子
  mounted() {
    this.requList();
    
  },
  // 监视属性
  watch: {
    getList() {
      this.Thelist();
      console.log(this.tableData);
    },
  },
  //计算属性
  computed: {
    getList() {
      return this.$store.state.user.list.list;
    },
  },
  // 方法
  methods: {
    deterEditor() {
      this.theEditor = false;
      console.log(this.DataList);
    },
    // 添加列表
    addList() {
      this.dialogVisible = false;
      let data = this.DataList;
      console.log(data);
      this.$store.dispatch("AddreqUser", data);
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    Thelist() {
      this.tableData = this.$store.state.user.list.list;
    },
    requList() {
      this.$store.dispatch("reqUser");
    },

    // 打开编辑窗口
    operation() {
      this.Hospitalshow = true;
    },
    // 选择医院
    theHospital() {
      this.choose = false;
    },
    complete() {
      this.choose = true;
    },
  },
};
</script>

<style lang="less" scoped>
.el-select {
  width: 100%;
}

input,
select {
  outline: none;
}
ul li {
  list-style: none;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
  text-align: center;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
}
.header {
  width: 1370px;
  height: 60px;
  box-sizing: border-box;
  margin-left: 30px;
  padding: 17px;
}
.user-span {
  position: relative;
  top: -7px;
  margin-left: 10px;
  font-size: 14px;
}
.user-select {
  margin-top: 5px;
}
.user-input {
  width: 248px;
  height: 25px;
  margin-top: 4px;
  border-radius: 15px;
  border: 1px solid #ccc;
}
// list
.user-list {
  width: 1300px;
  margin-left: 100px;
}
.grid {
  border-radius: 4px;
  min-height: 36px;
  text-align: left;
  margin-left: 70px;
}
.persList {
  height: 50px;
  margin-left: 100px;
  padding-top: 14px;
  box-sizing: border-box;
  border-radius: 20px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  position: relative;
  li {
    float: left;
    margin-right: 170px;
    color: #333333;
  }
}
.theEditor {
  width: 224px;
  height: 412px;
  background: #fff;
  border: 1px solid #ccc;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -114px;
  margin-left: -207px;
  .header-head {
    height: 32px;
    background: #f2f2f2;
    span {
      display: inline-block;
      margin: 6px 0 0 10px;
      font-size: 15px;
    }
    img {
      float: right;
      margin-top: 6px;
      margin-right: 10px;
    }
  }
  .chegatpassword {
    height: 40px;
    margin-top: 10px;
    span {
      color: #333333;
      font-size: 14px;
      margin: 0 0 0 12px;
    }
    input {
      width: 90%;
      margin-left: 10px;
    }
    select {
      width: 93%;
      margin-left: 10px;
    }
  }
  .theHospital {
    width: 224px;
    height: 412px;
    position: absolute;
    left: 100%;
    border: 1px solid #ccc;
    .search {
      width: 90%;
      height: 24px;
      border-radius: 15px;
      border: 1px solid #ccc;
      margin: 10px 0 0 10px;
      input {
        width: 150px;
        margin: 2px 0 0 5px;
        border: 0;
        outline: none;
      }
      img {
        float: right;
        margin: 3px 7px 0 0;
      }
    }
    ul li {
      margin-left: -15px;
    }
  }
  .confirm {
    height: 30px;
    display: flex;
    justify-content: center;
    margin-top: 15px;
    button {
      width: 65px;
      border: 0;
      border-radius: 5px;
      color: #fff;
    }
    .save {
      background: #169bd5;
    }
    .deletes {
      background: red;
      margin: 0 5px 0 5px;
    }
    .cancel {
      background: #ccc;
    }
  }
}
// 遮罩层
.MaskLayer {
  width: 100%;
  height: 100%;
  position: absolute;
  background: #adadad;
  opacity: 80%;
  .confirmdelete {
    width: 100%;
    height: 100px;
    margin-top: 50%;
    p {
      text-align: center;
      color: #fff;
      font-size: 14px;
    }
    .btn {
      width: 100%;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      button {
        width: 65px;
        height: 25px;
        margin-left: 10px;
        background: red;
        border: 0;
        border-radius: 5px;
        color: #fff;
        font-size: 14px;
      }
      button:last-child {
        background: #f2f2f2;
        color: #000;
      }
    }
  }
}
.adduser {
  width: 224px;
  height: 412px;
  background: #fff;
  border: 1px solid #ccc;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  margin-top: 200px;
  margin-left: -207px;
  .header-head {
    height: 32px;
    background: #f2f2f2;

    span {
      display: inline-block;
      margin: 6px 0 0 10px;
      font-size: 15px;
      float: left;
    }
    img {
      float: right;
      margin-top: 6px;
      margin-right: 10px;
    }
  }
  .chegatpassword {
    height: 40px;
    margin-top: 10px;
    span {
      color: #333333;
      font-size: 14px;
      margin: 0 0 0 12px;
      float: left;
    }
    input {
      width: 90%;
      margin-left: 10px;
    }
    select {
      width: 93%;
      margin-left: 10px;
    }
  }
  .theHospital {
    width: 224px;
    height: 412px;
    position: absolute;
    left: 100%;
    border: 1px solid #ccc;
    .search {
      width: 90%;
      height: 24px;
      border-radius: 15px;
      border: 1px solid #ccc;
      margin: 10px 0 0 10px;
      input {
        width: 150px;
        margin: 2px 0 0 5px;
        border: 0;
        outline: none;
      }
      img {
        float: right;
        margin: 3px 7px 0 0;
      }
    }
    ul li {
      margin-left: -15px;
    }
  }
  .confirm {
    height: 30px;
    display: flex;
    justify-content: right;
    margin: 15px 10px 0 0;
    button {
      width: 65px;
      border: 0;
      border-radius: 5px;
      color: #fff;
      margin-right: 5px;
    }
    .save {
      background: #169bd5;
    }
    .deletes {
      background: red;
      margin: 0 5px 0 5px;
    }
    .cancel {
      background: #ccc;
    }
  }
}
.batchuser {
  z-index: 5;
  width: 346px;
  height: 209px;
  background: #fff;
  border: 1px solid #ccc;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: 200px;
  margin-left: -207px;
  .header-head {
    height: 32px;
    background: #f2f2f2;
    span {
      display: inline-block;
      margin: 6px 0 0 10px;
      font-size: 14px;
      float: left;
    }
    img {
      float: right;
      margin-top: 6px;
      margin-right: 10px;
    }
  }
  .nav {
    width: 100%;
    height: 50px;
    margin-top: 40px;
    span {
      font-size: 10px;
    }
    a {
      color: #0000ff;
    }
  }
  .floot {
    height: 27px;
    margin-top: 55px;
    button {
      width: 65px;
      height: 25px;
      float: right;
      margin-right: 10px;
      border: 0;
      border-radius: 5px;
      font-size: 10px;
    }
  }
}
</style>